<template>
  <n-descriptions label-placement="left" bordered :column="1">
    <n-descriptions-item label="亮色模式">
      <n-switch
          v-model:value="themeConfig.theme"
      >
        <template #checked-icon>
          <n-icon :component="Moon"/>
        </template>
        <template #unchecked-icon>
          <n-icon :component="Sunny"/>
        </template>
      </n-switch>
    </n-descriptions-item>
    <n-descriptions-item label="显示Banner">
      <n-switch
          v-model:value="themeConfig.banner"
      />
    </n-descriptions-item>
    <n-descriptions-item label="显示背景图">
      <n-switch
          v-model:value="themeConfig.showBackImg"
      />
    </n-descriptions-item>
    <n-descriptions-item label="开启自定义组件透明">
      <n-switch
          v-model:value="themeConfig.componentOpacity"
      />
    </n-descriptions-item>
    <n-descriptions-item label="菜单模式">
      <n-radio-group v-model:value="themeConfig.menuMode">
        <n-radio value="vertical">垂直</n-radio>
        <n-radio value="horizontal">水平</n-radio>
      </n-radio-group>
    </n-descriptions-item>
    <n-descriptions-item label="布局预设">
      <n-radio-group v-model:value="themeConfig.layout">
        <n-radio value="layout1">布局1</n-radio>
        <n-radio value="layout2">布局2</n-radio>
      </n-radio-group>
    </n-descriptions-item>
    <n-descriptions-item label="侧边栏颜色">
      <n-color-picker v-model:value="themeConfig.siderColor" />
    </n-descriptions-item>
    <n-descriptions-item label="顶栏背景色">
      <n-color-picker v-model:value="themeConfig.topBarColor" />
    </n-descriptions-item>
    <n-descriptions-item label="主体区域背景色">
      <n-color-picker v-model:value="themeConfig.contentColor" />
    </n-descriptions-item>
<!--    恢复默认配置-->
    <n-descriptions-item label="恢复默认配置">
      <n-button type="error" @click="resetConfig">恢复默认配置</n-button>
    </n-descriptions-item>
  </n-descriptions>
</template>

<script setup lang="ts">

import {Moon, Sunny} from "@vicons/ionicons5";
import {useThemeConfig} from "/@bean/GlobalConfig";
import {storeToRefs} from "pinia";

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const resetConfig = () => {
 storesThemeConfig.clearThemeConfig();
}
</script>

<style scoped>

</style>